<!DOCTYPE html>
<!--
 * Copyright TLR Team, Inc. All Rights Reserved.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #hexagon {
                width: 100px;
                height: 55px;
                background: red;
                position: relative;
            }
            #hexagon:before {
                content: "";
                position: absolute;
                top: -25px;
                left: 0;
                width: 0;
                height: 0;
                border-left: 50px solid transparent;
                border-right: 50px solid transparent;
                border-bottom: 25px solid red;
            }
            #hexagon:after {
                content: "";
                position: absolute;
                bottom: -25px;
                left: 0;
                width: 0;
                height: 0;
                border-left: 50px solid transparent;
                border-right: 50px solid transparent;
                border-top: 25px solid red;
            }
        </style>
    </head>
    <body>
        <div>TODO write content</div>
        <div class="shape">
            <h2>Hexagon</h2>
            <div id="hexagon"></div>
        </div>
    </body>
</html>
